<template>
  <el-dialog
    class="e-dialog"
    :title="title"
    :visible.sync="dialogVisible"
    :width="width">
    <slot></slot>
    <span v-if="defaultFooter" slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{cancelText}}</el-button>
      <el-button type="primary" @click="confirm">{{confirmText}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    defaultFooter: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: "40%"
    }
  },
  data () {
    return {
      dialogVisible: false
    }
  },
  methods: {
    openDialog () {
      this.dialogVisible = true;
    },
    cancel () {
      this.$emit('cancel');
      this.closeDialog();
    },
    confirm () {
      this.$emit('confirm');
    },
    handleClose () {
      this.$emit('handleClose');
      this.closeDialog();
    },
    closeDialog () {
      this.dialogVisible = false;
    }
  }
}
</script>